<template>
  <div class="m_wrapper">
    <div class="left">
      <div class="side_bar">
        Side Menu
        <div class="handle" ref="handle"></div>
      </div>
    </div>
    <div class="right">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos error illum laboriosam laudantium natus quaerat tempora voluptatibus! Beatae dolor doloribus ex facere, iste iure maiores perferendis perspiciatis qui vel. Eligendi?</div>
  </div>
</template>

<script>
export default {
  name: "MouseMove",
  mounted() {
    let th  = this
    // 通过鼠标按下事件来监听鼠标移动事件
    this.$refs.handle.addEventListener('mousedown', function (e) {
      document.addEventListener('mousemove', th.move)
    })
    document.addEventListener('mouseup', function (e) {
      document.removeEventListener('mousemove', th.move)
    })
    this.target = document.querySelector('.side_bar')
  },
  data() {
    return {
      target: '',
      x: '',
    }
  },
  methods: {
    move(e) {console.log(e);
      if (e.clientX - this.target.offsetLeft> 800) {
        this.target.style.width = '800px'
      } else if (e.clientX - this.target.offsetLeft<200) {
        this.target.style.width = '200px'
      } else {
        console.log(this.target.offsetLeft);
        this.target.style.width = e.clientX - this.target.offsetLeft + 'px'
      }
    },
  }
}
</script>

<style scoped>
.m_wrapper {
  display: flex;
  padding: 10px;
  user-select: none;
  width: 100%;
  height: 100%;
}
.m_wrapper .side_bar {
  width: 250px;
  height: 100%;
  background-color: rgba(13, 202, 240, 0.32);
  position: relative;
  /* transition: width linear 100ms; */
  box-sizing: border-box;
}
.m_wrapper .right {
  margin-left: 10px;
  width: 100%;
  border: 1px solid #ccc;
}
.handle {
  height: 100%;
  width: 2px;
  position: absolute;
  right: -1px;
  top: 0;
  transition: all linear 200ms;
}
.handle:hover {
  background-color: #4578FF;
  cursor: col-resize;
}
</style>